<template>
	<div id="sui">
		<mt-header style="color: #000000;background: white;">
			<router-link to="/" slot="left">
				<mt-button icon="back">返回</mt-button>
			</router-link>
		</mt-header>
		<van-tabs :active="active">
			<van-tab>
				<div slot="title">下单</div>
				<div class="xia">
					<div class="jie">
						<p>姓名:</p>
						<p><input id="inputn" type="text" class="form-control" v-model="order"></p>
						<p>电话:</p>
						<p><input id="inputi" type="text" class="form-control" v-model="phone"></p>
						<p>地址：</p>
						<p><input id="inputa" type="text" class="form-control" style="height: 100px;" v-model="addr"></p>
						<button class="btn btn-success" type="button" @click="createNew()" style="float: right;">提交</button>
					</div>
				</div>
			</van-tab>
			<van-tab>
				<div slot="title">接单</div>
				<div>
					<van-card v-for="(item,index) in boardList" :key="index">
						<template #tags>
							<h3>{{item.title}}</h3>
							<h5>电话: {{item.id}}</h5>
							<p class="htp">地址: {{item.description}}</p>
							<button type="button" class="btn btn-pencil" style="float: right;" @click="showjie">接单</button>
						</template>
						<template #footer>
						</template>
					</van-card>
				</div>
			</van-tab>
		</van-tabs>

	</div>

</template>
<script>
	import {
		Toast
	} from 'mint-ui';
	export default {
		name: "list1",
		data() {
			return {
				active: 0,
				phone: '',
				order: '',
				addr:'',
				nowTime: '',
				boardList: [{
						title: '核桃酥',
						description: '高新区天泰路47号御府花都A区3-4-701',
						id: '13556765456',
						saleout: false,
						price: 12,
					},
					{
						title: '佛跳墙',
						description: ' 成都市青羊区光华东3路401号光华逸家13栋1单元303',
						id: '18036728253',
						saleout: false,
						price: 78
					},
					{
						title: '小笼包',
						description: '成都市锦江区二环路东五段摩玛城4栋1单元506',
						id: '18023428116',
					},
					{
						title: '养生粥',
						description: ' 武侯区武阳大道288号C-9 (中央花园城市别墅一期)',
						id: '17866728276',
						saleout: false,
						price: 16
					}
				],
			}
		},
		methods: {
			createNew() {
				var orderValue = this.order;
				var phoneValue = this.phone;
				var addrValue = this.addr;
				var timeValue = this.getTime();
				var obj = {
					userorder: orderValue,
					orderphone:phoneValue,
					orderaddr:addrValue,
					usertime: timeValue,
					logged: true
				}
				window.localStorage.setItem('order', JSON.stringify(obj));
				Toast('下单成功');
				this.nowTime = this.getTime()
			},
			showjie() {
				Toast('接单成功');
			},
			getTime() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				//以下代码依次是获取当前时间的年月日时分秒
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var minute = date.getMinutes();
				var hour = date.getHours();
				var second = date.getSeconds();
				//固定时间格式
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if (hour >= 0 && hour <= 9) {
					hour = "0" + hour;
				}
				if (minute >= 0 && minute <= 9) {
					minute = "0" + minute;
				}
				if (second >= 0 && second <= 9) {
					second = "0" + second;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate +
					" " + hour + seperator2 + minute + seperator2 + second;
				return currentdate;
			}
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#sui {
		margin-top: 10px;
		/* display: inline-block; */
	}

	.mylis {
		float: left;
	}

	.xia {
		white-space: nowrap;
		border: 1px outset;
		width: 336px;
		height: 400px;
		border-radius: 20px;
		margin-top: 10px;
		margin-left: 20px;
		background-color: #F5F5F5;
	}

	.jie {
		width: 300px;
		height: 300px;
		margin-top: 20px;
		margin-left: 20px;
		font-size: 15px;
	}

	.product-box {
		width: 240px;
		height: 200px;
		border-radius: 15px;
		float: left;
		/* text-align: center; */
		margin-left: 15px;
		background: #F5F5F5;
		margin-top: 5px;
	}
</style>
